<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>国标站点实时空气质量</title>
    <script src="https://vuejs.org/js/vue.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=bXD2LO0j2HgnWVZMXx2g5FeExhoV8HVD"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.1.2/js/jquery-weui.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <style>
        *{
            -webkit-box-sizing: border-box;
            -moz-box-sizing:border-box;
            box-sizing: border-box;
            padding: 0;
            margin:0;
        }
        #myTabs{
            width: max-content;
            white-space: nowrap;
            border-bottom: 1px solid #fff;
        }

        #tab_ci,#tab_aqi,#tab_pm25,#tab_pm10,#tab_co,#tab_o3,#tab_so2,#tab_no2{
            display: inline-block;
            color: #666666;
            font-size:14px;
            /*opacity: 0.7;*/
        }

        #tab_ci>div,#tab_aqi>div,#tab_pm25>div,#tab_pm10>div,#tab_co>div,#tab_o3>div,#tab_so2>div,#tab_no2>div{
             font-size:13px;
             border-radius: 2px;
             color:#fff;
             text-align:center;
             width: 2rem;
             padding-right: 10px;
             padding-left: 10px;
        }

        #myTabs>li.active{
            border-bottom: 2px solid #0a6cd6;
        }
        #myTabs>li>a{
            margin: 6px 0;
            padding:0;
        }
        #myTabs>li.active>a{
            border: 1px solid #fff;

        }
        ul.nav-tabs>li{
            border:none;
            display: inline-block;
            text-align: center;
        }
        .home{
            position: absolute;
            left: 80%;
            bottom: 2%;
        }

        .visualMap{
            position: absolute;
            width: 4.5rem;
            height: 7rem;
            background-color: #338FCC;
            opacity: 1;
            bottom: 3.5rem;
            right: -0.6rem;
            border-radius: 10px;
            display: none;
        }
        .visualMap ul{
            list-style: none;
            margin: 0;
            padding: 4px 2px;
            position: relative;
        }

        #demo_1:after {
          border: 10px solid transparent;
          border-top: 15px solid #338FCC;
          width: 0;
          height: 0;
          top: 6.9rem;
          left: 2.2rem;
          opacity: .7;
          position: absolute;
          content: ' '
        }
      .visualMap_child li span{
        display: inline-block;
        width:19px;
        height:19px;
        border-radius:5px;
        opacity:1;
      }
        .visualMap_child li p{
          margin: 0;
          font-size: 12px;
          color: #fff;
          padding-left: 1px;
        }
        .visualMap_child li{
          display: flex;
          padding: 1px 1px;
        }

        .pannal_header{
            padding:10px;
            border-bottom:1px solid #dadada;
            text-align:center;
        }

        .baidu-maps label {
		  max-width: none;
          border-radius: 2px;
		}
    </style>

</head>
<body ontouchstart>
<div id="bank">
</div>
<div class="container">
    <div id="rank" class="row">
        <div class="col-xs-6 col-md-6 pannal_header">
            <span style="margin-top: 10px;text-align: center">全市排名:{{rankOfUrban}}</span>
        </div>
        <div  class="col-xs-6 col-md-6 pannal_header" style="border-left: 1px solid #dadada;">
            <span style="margin-top: 10px;text-align: center">新区排名:{{rankOfBinhai}}</span>
        </div>
    </div>
    <div id="airQuality" class="row" style="overflow-x: auto;
    white-space: nowrap;">
        <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs" style="overflow-x: auto;white-space: nowrap;margin-bottom: .2rem;">
           <ul id="myTabs" class="nav nav-tabs" role="tablist">
                <li id="li_ci" role="presentation" class="active">
                    <a href="#ci" id="tab_ci" role="tab" data-toggle="tab" aria-controls="ci" aria-expanded="true">
                        综指
                        <br/>
                        <div v-bind:style="{background:ci_bgcolor}" class="bgcolor">{{ci}}
                        </div>
                    </a>
                </li>
                <li id="li_aqi" role="presentation">
                    <a href="#aqi" id="tab_aqi" role="tab" data-toggle="tab" aria-controls="aqi" aria-expanded="true">
                        AQI<br/><div v-bind:style="{background:aqi_bgcolor}" class="bgcolor">{{aqi}}</div>
                    </a>
                </li>
                <li id="li_pm25" role="presentation">
                    <a href="#pm25" id="tab_pm25" role="tab" data-toggle="tab" aria-controls="pm25" aria-expanded="true">
                        PM2.5<br/><div v-bind:style="{background:pm25_bgcolor}" class="bgcolor">{{pm25}}</div>
                    </a>
                </li>
                <li id="li_pm10" role="presentation">
                    <a href="#pm10" id="tab_pm10" role="tab" data-toggle="tab" aria-controls="pm10" aria-expanded="true">
                        PM10<br/><div v-bind:style="{background:pm10_bgcolor}" class="bgcolor">{{pm10}}</div>
                    </a>
                </li>
                <li id="li_co" role="presentation">
                    <a href="#co" id="tab_co" role="tab" data-toggle="tab" aria-controls="co" aria-expanded="true">
                        CO<br/><div v-bind:style="{background:co_bgcolor}" class="bgcolor">{{co}}</div>
                    </a>
                </li>
                <li id="li_o3" role="presentation">
                    <a href="#o3" id="tab_o3" role="tab" data-toggle="tab" aria-controls="o3" aria-expanded="true">
                        O3<br/><div v-bind:style="{background:o3_bgcolor}" class="bgcolor">{{o3}}</div>
                    </a>
                </li>
                <li id="li_so2" role="presentation">
                    <a href="#so2" id="tab_so2" role="tab" data-toggle="tab" aria-controls="so2" aria-expanded="true">
                        SO2<br/><div v-bind:style="{background:so2_bgcolor}" class="bgcolor">{{so2}}</div>
                    </a>
                </li>
                <li id="li_no2" role="presentation">
                    <a href="#no2" id="tab_no2" role="tab" data-toggle="tab" aria-controls="no2" aria-expanded="true">
                        NO2<br/><div v-bind:style="{background:no2_bgcolor}" class="bgcolor">{{no2}}</div>
                    </a>
                </li>
            </ul>

        </div>
        <div class="row" style="background:#ebebeb; height: 40px; padding:10px;">
            <span class="col-xs-6 col-md-6" style="color: #777777;font-size: 13px">预报: {{wind_info}}</span>  
            <span class="col-xs-6 col-md-6" style="color: #777777;font-size: 12px;text-align: right;"> 更新时间: {{update_time}}</span>
        </div>
    </div>
    <div class="row">
        <div id="urbanMap" class="baidu-maps" style="height:28rem;"></div>
    </div>

</div>

<div class="home">
    <img src="%0Ad2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9i%0AZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2Vo%0AaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6%0AbnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5%0ALjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpS%0AREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJk%0AZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIg%0AeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxu%0Aczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1s%0AbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9S%0AZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9w%0AIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlk%0AOjUxRDg3M0JFREUxODExRTdBRTc4REY1QTMwRUM2QzcwIiB4bXBNTTpEb2N1%0AbWVudElEPSJ4bXAuZGlkOjUxRDg3M0JGREUxODExRTdBRTc4REY1QTMwRUM2%0AQzcwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9Inht%0AcC5paWQ6NTFEODczQkNERTE4MTFFN0FFNzhERjVBMzBFQzZDNzAiIHN0UmVm%0AOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTFEODczQkRERTE4MTFFN0FFNzhERjVB%0AMzBFQzZDNzAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94%0AOnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5QofInAAADlElEQVR42tyZ%0AT0hUURTG79z+LaRFbkIkkgl0I2REpSHYInMVuAgCQxeiUVBge3Eh7hMG+kPh%0AwoEgSBBajbZIiCxpIWELJW0hIrmYTVhU1vSd/K4eni/r3XnWmw583Hl33pz7%0A83ruve+clzJF2NmHhXI0TVQtVA1JXxlvWYXy0Bw0A02InlxM5X3HTHlA7kLT%0ACnVC56DdEV2sQWPQEDQK+G87AgxQubcd6oOOmHhsHuqHsgAvxAYMWPl334Pq%0AQ75egMahSWgWWoI+8Lv9UCVUAzVAzVA6xMcLqBvQM0UDA/YKmkFon+r+DA1D%0A9zHIVMSQOommC+oI8dkDf3e8gOHYEvR64CuJvV44Xi5ywVagGeBa0JYh+Pc/%0ABiZsFmpT3YtyDUfPTIyGsRrRPIAOqW65bg+Dtr/wMxiAfQrVxQ0rRp91HMNZ%0AGxl+P8OM2duq6zF0AY6/mB00jLsXzSPovOq+GozpVMhu8EotBvmrW6LAwofs%0AArKwpvC7BQ/oHHRGLcTj8PNmCzD32edq61pkGOQjDNjC/8ge6KvMFn6f8zg9%0Ap1VMy5Z32u3TOobbA/tsm8cR2kNYw/aGR0znA+unnmybi47HbZ/eujwX2KfA%0A9cciFuKQ6uoj48YMt6rjVuKm13PtyDG7ws8rvPa1XrIYsrVqYL15D/seCvid%0AxF4VdFRaXvtud8s8TY1mTDHI36unrlNRj9sd3Opkt3mpnvIOWj7LOtiFpMBy%0Alqf4cGXI2OSAnY3HMCtV0C3ockzcmukncK3qmIxhgJtyQkF3AX0sBn+aqdYy%0ArXE2G8MAB9TnwzH400zVljmYsyWTPNNM5VYljEZlCkkyzVRmTYmZZSpuVA6W%0ANNNMq5Z1A2eVCQTWTHnLIoezmgQCa6Y5y4qMs4YEAmumGcvykbPmBAJrpgkH%0AvMaONB84EmFkSauHnwnLJ/wxdV9XgmZXs4wJq1XFEWcdLHL869mtYHVIF3A2%0AHuBHzXphzjBjHkjA7A6o7H2ejOvALHnqdKaTFZlireA5u42BLKjflWX10Zxl%0ASr1RLmI2EtXeqkXy2gO2nKUqo9L87JZSFfP+bpX4SV1ghMWNKHYNugSdgM93%0AHoWUEVWTEJZuXTsuuVKVDcmj5IaM6hIHOc/wiBIGuQBsJqxWbLep4Og4klrX%0AdEwLMWyBTZvNeprh2D1h9/8fBe2QmE7+K4PAIKXzUkZBl85rrwB4abxY3GY7%0A+quvbn8IMADRRWqxSswS5AAAAABJRU5ErkJggg==" alt="" class="png"/>
    <div class="visualMap" name="0">
      <ul class="visualMap_child">
        <li>
          <span style="background-color:#58C750;"></span>
          <p>优</p>
        </li>
        <li>
          <span style="background-color:#E3CA55;"></span>
          <p>良</p>
        </li>
        <li>
          <span style="background-color: #D99157;"></span>
          <p>轻度污染</p>
        </li>
        <li>
          <span style="background-color: #B34B47;"></span>
          <p>中度污染</p>
        </li>
        <li>
          <span style="background-color:#814C99;"></span>
          <p>重度污染</p>
        </li>
        <li>
          <span style="background-color:#7A3D3D;"></span>
          <p>严重污染</p>
        </li>
      </ul>
      <span id="demo_1"></span>
    </div>
</div>
<script type="text/javascript">
    //var tanChuang=document.getElementsByClassName("visualMap");

    //方法一
    $(".png").click(function(){
      var class_ = $(".visualMap").attr("name");
      if(class_==0){
        $(".visualMap").attr("style","display:block;");
        $(".visualMap").attr("name","1");
      }else{
        $(".visualMap").attr("style","display:none;");
        $(".visualMap").attr("name","0");
      }
    });

   // 初始化数据绑定
    var rank = new Vue({
        el: '#rank',
        data: {
            rankOfUrban: '',
            rankOfBinhai: ''
        }
    });
    var airQuality = new Vue({
        el: '#airQuality',
        data: {
            ci: '',
            ci_bgcolor:'',
            aqi:'',
            aqi_bgcolor:'',
            pm25:'',
            pm25_bgcolor:'',
            pm10:'',
            pm10_bgcolor:'',
            co:'',
            co_bgcolor:'',
            o3:'',
            o3_bgcolor:'',
            so2:'',
            so2_bgcolor:'',
            no2:'',
            no2_bgcolor:'',
            wind_info:'',
            update_time:''
        }
    });


    //初始化baidu地图
	// 百度地图API功能
	var map = new BMap.Map("urbanMap");
	var point = new BMap.Point(117.464843, 39.123571);
	map.centerAndZoom(point, 10);
    map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放

    var opts = {anchor: BMAP_ANCHOR_TOP_LEFT};
    map.addControl(new BMap.NavigationControl(opts));
    
    //map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
    map.disable3DBuilding();

    // 地图自定义样式
    map.setMapStyle({
        styleJson: [{
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'land',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#f3f3f3'
                        }
                    }, {
                        'featureType': 'railway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fdfdfd'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'poi',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'green',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'subway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'manmade',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'local',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'boundary',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'building',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'label',
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#666666'
                        }
                    }]
    });

    //已经加载的 label
    var labels = [];
	//增加 label
	function addLabel(data){
		var point = new BMap.Point(data.lng,data.lat);
		var opts = {
		  position : point,    // 指定文本标注所在的地理位置
		  //offset   : new BMap.Size(30, -30)    //设置文本偏移量
		}
		var label = new BMap.Label(data.value, opts);  // 创建文本标注对象
		label.setStyle({
			 color : "#FFFFFF",
          	 backgroundColor: data.valColor,
			 fontSize : "12px"
			 //,height : "20px"
			 ,width : "30px"
			 ,textAlign : "center"
			 ,border : "1px"
			 //lineHeight : "20px",
			 //fontFamily:"微软雅黑"
		 });
		map.addOverlay(label);
        labels.push(label); 
	}

    function removeLabels(){
        if(labels.length > 0){
            for(var i=0;i<labels.length;i++){
                map.removeOverlay(labels[i])    
            }
        }
        labels = [];
    }

    function getColor(value){
        if(value>300){
            return "#B34D4D";
        }else if(value>200 && value<=300){
            return "#8E236B";
        }else if(value >150 && value <=200){
            return "#FF0000";
        }else if(value >100 && value <=150){
            return "#FF7F00";
        }else if(value >50 && value <=100){
            return "#FFFF00";
        }else if(value <=50){
            return "#58C750";
        }
    }


    // 读取空气质量数据
    var baseURL = "http://dev2.airsensor.org/airapi/station/TianjingByStation/";
    //var baseURL = "http://localhost:8881/airapi/station/TianjingByStation/";
    function getAirData(name) {
        //axios.get(baseURL+name).then(function (response) {
        var url = baseURL + name + "?" + (new Date()).getTime();
        $.ajax({
            type: "get",
            async: false,
            url: url,
            dataType: "jsonp",
            jsonp: "callback",
            success: function (data) {
                rank.rankOfUrban = data.rankingByCity;
                rank.rankOfBinhai = data.rankingByArea;
                airQuality.ci = data.compIndex;
                airQuality.ci_bgcolor = data.compIndexColor;
                airQuality.aqi = data.aqi;
                airQuality.aqi_bgcolor = data.aqiColor;
                airQuality.pm25 = data.pm25;
                airQuality.pm25_bgcolor = data.pm25Color;
                airQuality.pm10 = data.pm10;
                airQuality.pm10_bgcolor = data.pm10Color;
                airQuality.co = data.co;
                airQuality.co_bgcolor = data.coColor;
                airQuality.o3 = data.o3;
                airQuality.o3_bgcolor = data.o3Color;
                airQuality.so2 = data.so2;
                airQuality.so2_bgcolor = data.so2Color;
                airQuality.no2 = data.no2;
                airQuality.no2_bgcolor = data.no2Color;
                airQuality.wind_info = data.direction + ', ' + data.speed;
                airQuality.update_time = data.updateTime;

                // update map date
                removeLabels();
                for (var i = 0; i < data.airinfoStation.length; i++) {
                	var airinfo = data.airinfoStation[i];
                	if(airinfo.value && airinfo.value != '-' && airinfo.value != '/'){
                		//d.push([date.airinfoStation[i].lng, date.airinfoStation[i].lat, date.airinfoStation[i].value,date.airinfoStation[i].valColor]);
                		addLabel(airinfo);
                	}
                    
                }
              
            },
            error: function () {
                $.toast("获取数据失败");
            }
        });
    }

    $('#myTabs a').click(function (e) {
        e.preventDefault();
        if(this.id=='tab_ci'){
            $('#li_ci').addClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getAirData('COMPINDEX');
        }else if(this.id=="tab_aqi"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').addClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getAirData('AQI');
        }else if(this.id=="tab_pm25"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').addClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getAirData('PM25');
        }else if(this.id=="tab_pm10"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').addClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getAirData('PM10');
        }else if(this.id=="tab_co"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').addClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getAirData('CO');
        }else if(this.id=="tab_o3"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').addClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getAirData('O3');
        }else if(this.id=="tab_so2"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').addClass('active')
            $('#li_no2').removeClass('active')
            getAirData('SO2');
        }else if(this.id=="tab_no2"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').addClass('active')
            getAirData('NO2');
        }
    });
    getAirData('COMPINDEX');

</script>
</body>
</html>
